<template>
  <div class="app-container">
    <div style="display: flex;flex-flow: row nowrap;margin-left: 10%;margin-bottom: 2%">
      <div style="border:1px;background-color: #4e8dff; width: 6px;height: 20px"></div>
      <span style="margin-left: 10px">{{ title }}</span>
    </div>
    <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="140px"
             style="margin-left: 25%;">
      <el-row>
        <el-col :span="16">
          <el-form-item label="考核部门" prop="deptName">
            <el-input v-model="deptName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="考核年度" prop="tempExamineYear">
            <el-date-picker
              v-model="form.tempExamineYear"
              type="year"
              placeholder="请选择考核年度"
              :picker-options="examineYearOptions"
              style="width: 100%"
              :disabled="isUpdate"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="考核周期" prop="examineCycle">
            <el-radio-group v-model="form.examineCycle" style="width: 120%" @change="radioChangeHandler"
                            :disabled="isUpdate">
              <el-radio
                v-for="dict in dict.type.examine_cycle"
                :key="dict.value"
                :label="dict.value"
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="cycleVal==='month' && !isUpdate">
        <el-col :span="16">
          <el-form-item label="选择周期" prop="tempMonthPickCycle">
            <el-date-picker
              v-model="form.tempMonthPickCycle"
              type="month"
              placeholder="选择周期"
              style="width: 100%"
              format="yyyy 年 MM 月"
              :picker-options="examineMonthOptions"
              :disabled="isUpdate"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="cycleVal==='quarter' && !isUpdate">
        <el-col :span="16">
          <el-form-item label="选择周期" prop="tempQuarterPickCycle">
            <quarter v-model="form.tempQuarterPickCycle" @change="getQuarter" :disabled="isUpdate"></quarter>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="cycleVal==='half_year' && !isUpdate">
        <el-col :span="16">
          <el-form-item label="选择周期" prop="tempHalfYearPickCycle">
            <halfyear v-model="form.tempHalfYearPickCycle" @change="getHalfyear" :disabled="isUpdate"></halfyear>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="cycleVal==='year' && !isUpdate">
        <el-col :span="16">
          <el-form-item label="选择周期" prop="tempExamineYear">
            <el-date-picker
              v-model="form.tempExamineYear"
              type="year"
              style="width: 100%"
              disabled
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="isUpdate">
        <el-col :span="16">
          <el-form-item label="选择周期" required>
            <el-input v-model="form.pickCycleText" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="附件" prop="attachFile">
            <file-upload v-model="form.attachFile" :isShowTip="false"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--      考核人选择组件-->
      <draggable ref="draggableRef" :isAdd="!isUpdate" :examineId="examineId" :examineType="0" :isDisabled="true"></draggable>
    </el-form>
    <div style="margin: 2% auto auto 40%;">
      <el-button class="form_button_item" @click="closeBtnHandler">取消</el-button>
    </div>
  </div>
</template>

<script>
import quarter from "@/views/tool/quarter";
import halfyear from "@/views/tool/halfyear";
import {getUserDeptInfo} from "@/api/system/user";
import {treeselect} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import draggable from "@/views/system/user/draggable";
import {getPerformance, addPerformance, updatePerformance} from "@/api/examine/performance/api";

export default {
  name: "Add",
  dicts: ['examine_cycle'],
  components: {
    quarter,
    halfyear,
    Treeselect,
    draggable
  },
  data() {
    return {
      formLoading: false,
      title: "",
      cycleVal: '',
      deptName: '',
      isUpdate: false,
      saveBtnLoading: false,
      // 表单参数
      form: {},
      examineId: '',
      // 部门树选项
      deptOptions: [],
      // 表单校验
      rules: {
        tempExamineYear: [
          {required: true, message: "请选择考核年度", trigger: "change"}
        ],
        examineCycle: [
          {required: true, message: "请选择考核周期", trigger: "change"}
        ],
        tempMonthPickCycle: [
          {required: true, message: "请选择周期", trigger: "change"}
        ],
        tempQuarterPickCycle: [
          {required: true, message: "请选择周期", trigger: "change"}
        ],
        tempHalfYearPickCycle: [
          {required: true, message: "请选择周期", trigger: "change"}
        ],
        attachFile: [
          {required: true, message: "请上传附件", trigger: "change"}
        ]
      },
      examineYearOptions: {
        disabledDate: (time) => {
          const date = new Date()
          const year = date.getFullYear()
          const timeYear = time.getFullYear()
          return year > timeYear + 3
        }
      },
      examineMonthOptions: {
        disabledDate: (date) => {
          let year = this.form.tempExamineYear;
          return (date.valueOf() < new Date(year+'-01-01').getTime() || date.valueOf() > new Date(year+'-12-31').getTime());
        },
      }
    }
  },
  created() {
    this.initPage();
  },
  methods: {
    initPage() {
      this.reset()
      this.getTreeselect()
      this.examineId = this.$route.query.id;
      if (this.examineId) {
        this.title = '查看考核'
        this.isUpdate = true;
        this.formLoading = true;
        getPerformance(this.examineId).then(resp => {
          this.form.id = this.examineId
          if (resp.data.attachFile) {
            this.form.attachFile = resp.data.attachFile
          }
          if (resp.data.examineDeptName) {
            this.deptName = resp.data.examineDeptName
          } else {
            this.deptName = '中层管理考核'
          }

          this.$set(this.form, 'pickCycleText', resp.data.pickCycleText)
          this.$set(this.form, 'examineDeptId', resp.data.examineDeptId)
          this.$set(this.form, 'tempExamineYear', resp.data.examineYear)
          this.$set(this.form, 'examineCycle', resp.data.examineCycle)
          this.cycleVal = resp.data.examineCycle
          if (resp.data.examineCycle === 'month') {
            this.$set(this.form, 'tempMonthPickCycle', resp.data.pickCycle)
          } else if (resp.data.examineCycle === 'quarter') {
            this.$set(this.form, 'tempQuarterPickCycle', resp.data.pickCycle)
          } else if (resp.data.examineCycle === 'half_year') {
            this.$set(this.form, 'tempHalfYearPickCycle', resp.data.pickCycle)
          }
        }).finally(() => {
          this.formLoading = false;
        })
      } else {
        this.title = '提交考核'
        // 考核年度默认当前年
        this.$set(this.form, 'tempExamineYear', String(new Date().getFullYear()))
        getUserDeptInfo().then(resp => {
          if (resp.data.userCategory.indexOf(1) !==-1) {
            this.deptName = '中层管理考核';
          } else {
            this.form.examineDeptId = resp.data.deptId;
            this.deptName = resp.data.ancestorNames;
          }
        })
      }
    },
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    closeBtnHandler() {
      this.reset()
      // 关闭当前页面
      this.$tab.closeOpenPage();
      // 刷新列表页面
      this.$tab.refreshPage({path: "/examine/index"});
    },
    // 季度选择回调
    getQuarter(val, text) {
      this.form.tempQuarterPickCycle = val
      this.form.pickCycleText = text
    },
    // 半年度选择回调
    getHalfyear(val, text) {
      this.form.tempHalfYearPickCycle = val
      this.form.pickCycleText = text
    },
    radioChangeHandler(data) {
      this.cycleVal = data;
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        examineDeptName: undefined,
        examineDeptId: undefined,
        pickCycleText: undefined,
        tempExamineYear: undefined,
        examineCycle: undefined,
        tempMonthPickCycle: undefined,
        tempQuarterPickCycle: undefined,
        tempHalfYearPickCycle: undefined,
        attachFile: undefined
      };
      this.resetForm("form");
    }
  }
}
</script>

<style scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: #606266;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  color: #606266;
}

::v-deep .el-radio__input.is-disabled + span.el-radio__label {
  background-color: #fff;
  color: #606266;
}
</style>
